<template>
  <div class="Limits">
    <el-card class="card">
      <el-table border :data="tableData" size="large" style="width: 100%">
        <el-table-column prop="id" label="学生ID" align="center" width="100" />
        <el-table-column prop="username" label="学生姓名" align="center" />
        <el-table-column prop="module" label="大模型权限" align="center">
          <template #default="scope">
            <el-dropdown
              @command="handleClickCommand($event, scope.row, 'module')"
              class="el-dropdown"
            >
              <span class="el-dropdown-link">
                {{ String(scope.row.module) === '1' ? '有' : '无' }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">允许</el-dropdown-item>
                  <el-dropdown-item command="0">拒绝</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="text" label="文本权限" align="center">
          <template #default="scope">
            <el-dropdown
              @command="handleClickCommand($event, scope.row, 'text')"
              class="el-dropdown"
            >
              <span class="el-dropdown-link">
                {{ String(scope.row.text) === '1' ? '有' : '无' }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">允许</el-dropdown-item>
                  <el-dropdown-item command="0">拒绝</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="choose" label="选课权限" align="center">
          <template #default="scope">
            <el-dropdown
              @command="handleClickCommand($event, scope.row, 'choose')"
              class="el-dropdown"
            >
              <span class="el-dropdown-link">
                {{ String(scope.row.choose) === '1' ? '有' : '无' }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">允许</el-dropdown-item>
                  <el-dropdown-item command="0">拒绝</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="interview" label="模拟面试权限" align="center">
          <template #default="scope">
            <el-dropdown
              @command="handleClickCommand($event, scope.row, 'interview')"
              class="el-dropdown"
            >
              <span class="el-dropdown-link">
                {{ String(scope.row.interview) === '1' ? '有' : '无' }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">允许</el-dropdown-item>
                  <el-dropdown-item command="0">拒绝</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqTeacherGetStudent, reqUpdateUserAuthority } from '@/api/teacher'

const tableData = ref<any>([])

// 修改学生权限
const handleClickCommand = async (val: number, scope: any, who: string) => {
  let data: any = {}
  switch (who) {
    case 'module':
      data = { ...scope, module: Number(val) }
      break
    case 'text':
      data = { ...scope, text: Number(val) }
      break
    case 'choose':
      data = { ...scope, choose: Number(val) }
      break
    case 'interview':
      data = { ...scope, interview: Number(val) }
      break
  }
  const res = await reqUpdateUserAuthority({ ...data, userId: data.id })
  if (res.code === 200) {
    ElMessage.success('权限修改成功')
    teacherGetStudent()
  } else {
    ElMessage.error('权限修改失败')
  }
}

// 获取学生信息
const teacherGetStudent = async () => {
  const res = await reqTeacherGetStudent()

  if (res.code === 200) {
    tableData.value = res.data
      .map((user: any) => ({
        username: user.username,
        id: user.id,
        module: user.authority.module,
        text: user.authority.text,
        choose: user.authority.choose,
        interview: user.authority.interview,
      }))
      .sort((a: any, b: any) => a.id - b.id)
  }
}

onMounted(() => {
  teacherGetStudent()
})
</script>

<style lang="scss" scoped>
.Limits {
  padding: 20px;

  & > .card {
    min-height: calc(100vh - 88px);

    .el-dropdown {
      cursor: pointer;
      color: #409eff;

      & > .el-dropdown-link {
        display: flex;
        align-items: center;
      }
    }
  }
}
:deep(.el-table .cell) {
  display: flex;
  justify-content: center;
}
:global(div[aria-hidden='true']) {
  display: none !important;
}
</style>
